<template>
	<view class="form">
		<view class="fromPadding">
			<u--form labelPosition="top" :model="uForm" :rules="rules" ref="uFormRef" labelWidth="150">
				<!-- 房间尺寸 -->
				<view class="card">
					<view class="label">
						<text class="title">房间尺寸</text>
					</view>
					<u-form-item label="长" prop="long" ref="item1" required>
						<up-input v-model="uForm.long" placeholder="请输入长度" maxlength="6" type="number"
							@input="handleInputChange($event, 'long')"></up-input>
						<text class="unit">mm</text>
					</u-form-item>
					<u-form-item label="宽" prop="width" ref="item2" required>
						<up-input v-model="uForm.width" placeholder="请输入宽度" maxlength="6" type="number"
							@input="handleInputChange($event, 'width')"></up-input>
						<text class="unit">mm</text>
					</u-form-item>
					<u-form-item label="高" prop="height" ref="item3" required>
						<up-input v-model="uForm.height" placeholder="请输入高度" maxlength="6" type="number"
							@input="handleInputChange($event, 'height')"></up-input> <text class="unit">mm</text>
					</u-form-item>
				</view>

				<!-- 房间门洞的尺寸 -->
				<view class="card">
					<view class="label">
						<text class="title">房间门洞的尺寸(缩略图仅为示例)</text>
						<text class="add" @click="addMen">添加</text>
					</view>
					<view class="itemRow">
						<view class="upload _width">

							<view class="addData" v-for="(item1,index1) in doorArr" :key="index1">

								<view class="icon">
									<image src="https://img.zhizhuangtong.com/project_media/img/xcx/khd/men.png" mode=""
										style="">
									</image>
								</view>
								<view class="title">长:{{item1.long}}mm 宽:{{item1.width}}mm 高:{{item1.height}}mm</view>


								<view class="edit">
									<text class="copy" @click="copyMen(index1)">复制此门</text>
									<text class="remove" @click="removeMen(index1)">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 房间窗户的尺寸 -->
				<view class="card">
					<view class="label">
						<text class="title">房间窗户的尺寸(缩略图仅为示例)</text>
						<text class="add" @click="addChuang">添加</text>
					</view>
					<view class="itemRow">
						<view class="upload _width">

							<view class="addData" v-for="(item2,index2) in windowArr" :key="index2">

								<view class="icon">
									<image src="https://img.zhizhuangtong.com/project_media/img/xcx/khd/men.png" mode=""
										style="">
									</image>
								</view>
								<view class="title">长:{{item2.long}}mm 宽:{{item2.width}}mm 高:{{item2.height}}mm</view>

								<view class="edit">
									<text class="copy" @click="copyChuang(index2)">复制此窗</text>
									<text class="remove" @click="removeChuang(index2)">删除</text>
								</view>
							</view>

						</view>
					</view>

				</view>


				<view class="card">
					<view class="label">
						<text class="title">暖心房所在位置图片</text>
					</view>

					<view class="upload_customRow">
						<view class="uploadCardImg">
							<view class="uploadImg">
								<up-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="3"
									:previewFullImage="false" :key="fileList1.length" :maxCount="6">

								</up-upload>

							</view>


						</view>
					</view>
				</view>
			</u--form>
		</view>
		<view class="btn">
			<button @click="submit" type="primary">保存</button>
		</view>



		<!-- 添加门洞 -->
		<up-popup :show="menShow" @close="closeMen" @open="openMen" mode="center" :round="10" :closeable="true"
			:closeOnClickOverlay="false">
			<view class="formRow">
				<view class="label">房间门洞尺寸</view>
				<u--form labelPosition="top" :model="menFrom" ref="uFormRef2" labelWidth="50">
					<u-form-item label="长" ref="item10" required>
						<input v-model="menFrom.long" placeholder="请输入长度" maxlength="6" type="number" /><text
							class="unit">mm</text>
					</u-form-item>
					<u-form-item label="宽" ref="item11" required>
						<input v-model="menFrom.width" placeholder="请输入宽度" maxlength="6" type="number" /><text
							class="unit">mm</text>
					</u-form-item>
					<u-form-item label="高" ref="item12" required>
						<input v-model="menFrom.height" placeholder="请输入高度" maxlength="6" type="number" /><text
							class="unit">mm</text>
					</u-form-item>
				</u--form>
				<view class="footer">
					<button class="close" @click="closeMen">取消</button>
					<button class="save" @click="saveMen">确定</button>
				</view>
			</view>
		</up-popup>



		<!-- 添加门窗 -->
		<up-popup :show="chuangShow" @close="closeChuang" @open="openChuang" mode="center" :round="10" :closeable="true"
			:closeOnClickOverlay="false">
			<view class="formRow">
				<view class="label">房间窗户尺寸</view>
				<u--form labelPosition="top" :model="chuangFrom" ref="uFormRef3" labelWidth="50">
					<u-form-item label="长" ref="item20" required>
						<input v-model="chuangFrom.long" placeholder="请输入长度" maxlength="6" type="number" />
						<text class="unit">mm</text>

					</u-form-item>
					<u-form-item label="宽" ref="item21" required>
						<input v-model="chuangFrom.width" placeholder="请输入宽度" maxlength="6" type="number" />
						<text class="unit">mm</text>
					</u-form-item>
					<u-form-item label="进深" ref="item22" required>
						<input v-model="chuangFrom.height" placeholder="请输入进深" maxlength="6" type="number" /><text
							class="unit">mm</text>
					</u-form-item>

				</u--form>
				<view class="footer">
					<button class="close" @click="closeChuang">取消</button>
					<button class="save" @click="saveChuang">确定</button>
				</view>
			</view>
		</up-popup>


	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		toRaw,
	} from 'vue'
	import {
		onLoad,
		onShow,
		onUnload,
		onReady
	} from "@dcloudio/uni-app";

	import {
		get_oss_url,
		reform
	} from '@/api/warm.js'


	// 数据
	const uForm = ref({
		long: '',
		width: '',
		height: '',

		door: [],
		window: [],
		position: '',

	})

	const fileList1 = ref([]); //位置照片
	// 引用
	const uFormRef = ref(null)
	const uFormRef2 = ref(null)
	const uFormRef3 = ref(null)

	const rules = {
		long: [{
				required: true,
				message: '请输入长度',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (value && !/^\d+$/.test(value)) {
						return callback(new Error('长度只能输入数字'));
					}
					callback();
				},
				message: '长度只能输入数字',
				trigger: ['blur', 'change']
			}
		],
		width: [{
				required: true,
				message: '请输入宽度',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (value && !/^\d+$/.test(value)) {
						return callback(new Error('宽度只能输入数字'));
					}
					callback();
				},
				message: '宽度只能输入数字',
				trigger: ['blur', 'change']
			}
		],
		height: [{
				required: true,
				message: '请输入高度',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					if (value && !/^\d+$/.test(value)) {
						return callback(new Error('高度只能输入数字'));
					}
					callback();
				},
				message: '高度只能输入数字',
				trigger: ['blur', 'change']
			}
		]
	};






	const validateNumber = (rule, value, callback) => {
		if (value && !/^\d+$/.test(value)) {
			return callback(new Error('请输入数字'));
		}
		callback();
	};


	const menShow = ref(null)
	const menFrom = ref({
		long: '',
		width: '',
		height: ''
	})


	const chuangShow = ref(null)
	const chuangFrom = ref({
		long: '',
		width: '',
		height: ''
	})
	const doorArr = ref([])
	const windowArr = ref([])


	// 处理输入的变化，只允许输入数字
	const handleInputChange = (e, field) => {
		let value = e.target.value;
		// 使用正则去掉所有非数字字符
		value = value.replace(/\D/g, ''); // 只保留数字
		// 更新输入的值
		uForm.value[field] = value;
	};

	// 删除正面图片
	const deletePic1 = (event) => {
		fileList1.value.splice(event.index, 1);
		if (!Array.isArray(Imgarr.value)) {
			Imgarr.value = ''; // 如果不是数组，则初始化为空数组
		}
		if (Imgarr.value.length > event.index) {
			Imgarr.value.splice(event.index, 1);
		}
		console.log('删除后的图片', Imgarr.value)

	};

	onShow(() => {
		uni.setStorageSync('isUpload', '1'); //清除上传状态
	})


	// 设置规则
	onMounted(() => {
		nextTick(() => {
			if (uFormRef.value) {
				uFormRef.value.setRules(rules)
			}
		})
	})

	const isValidNumber = (value) => {
		const regex = /^[1-9][0-9]*$/; // 正则：以 1-9 开头，后面可以跟任意数字
		return regex.test(value);
	};


	// 显示门洞
	const addMen = () => {
		// clearFrom();
		menFrom.value.long = ''
		menFrom.value.width = ''
		menFrom.value.height = ''

		if (doorArr.value.length < 4) {
			menShow.value = true;
			// if (uFormRef2.value) {
			// 	uFormRef2.value.resetFields(); // 清除校验
			// 	uFormRef2.value.setRules(rules2); // 设置规则
			// }
		} else {
			uni.showToast({
				title: '最多只能添加4个门洞',
				icon: 'none'
			});
		}


	};

	// 关闭门洞信息
	const closeMen = () => {
		// clearFrom()
		menFrom.value.long = ''
		menFrom.value.width = ''
		menFrom.value.height = ''
		menShow.value = false
	}

	// 保存添加门
	const saveMen = async () => {
		// await nextTick();
		// if (uFormRef2.value) {
		// 	try {
		// 		await uFormRef2.value.validate();
		if (doorArr.value.length < 4) {

			if (!menFrom.value.long) {
				showToast('请输入长度');
				return;
			} else if (!isValidNumber(menFrom.value.long)) {
				menFrom.value.long = ''
				showToast('长度只能输入正整数，且不能以 0 开头');
				return;
			}

			if (!menFrom.value.width) {
				showToast('请输入宽度');
				return;
			} else if (!isValidNumber(menFrom.value.width)) {
				menFrom.value.width = ''
				showToast('宽度只能输入正整数，且不能以 0 开头');
				return;
			}

			if (!menFrom.value.height) {
				showToast('请输入高度');
				return;
			} else if (!isValidNumber(menFrom.value.height)) {
				menFrom.value.height = ''
				showToast('高度只能输入正整数，且不能以 0 开头');
				return;
			}

			doorArr.value.push({
				long: menFrom.value.long,
				width: menFrom.value.width,
				height: menFrom.value.height
			});
			menShow.value = false;
		} else {
			uni.showToast({
				title: '最多只能添加4个门洞',
				icon: 'none'
			});
		}
		// } catch (err) {
		// 	console.log('2222')
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请完善内容'
		// 	});
		// }
		// }
	};

	// 复制门洞
	const copyMen = (index) => {
		if (doorArr.value.length < 4) {
			const copiedMen = {
				...doorArr.value[index]
			};
			doorArr.value.push(copiedMen);
		} else {
			uni.showToast({
				title: '最多只能复制4个门洞',
				icon: 'none'
			});
		}
	};

	// 删除门
	const removeMen = (index) => {
		doorArr.value.splice(index, 1);
	};


	// 显示窗户
	const addChuang = () => {
		// clearFrom();
		chuangFrom.value.long = ''
		chuangFrom.value.width = ''
		chuangFrom.value.height = ''
		if (windowArr.value.length < 4) {
			chuangShow.value = true;
		} else {
			uni.showToast({
				title: '最多只能添加4个窗户',
				icon: 'none'
			});
		}
	};


	// 关闭窗户信息
	const closeChuang = () => {
		// clearFrom()
		chuangFrom.value.long = ''
		chuangFrom.value.width = ''
		chuangFrom.value.height = ''
		chuangShow.value = false
	}

	// 保存窗户
	const saveChuang = async () => {
		// await nextTick();
		// if (uFormRef3.value) {
		// 	try {
		// 		await uFormRef3.value.validate();
		if (windowArr.value.length < 4) {
			if (!chuangFrom.value.long) {
				showToast('请输入长度');
				return;
			} else if (!isValidNumber(chuangFrom.value.long)) {
				chuangFrom.value.long = ''
				showToast('长度只能输入正整数，且不能以 0 开头');
				return;
			}
			if (!chuangFrom.value.width) {
				showToast('请输入宽度');
				return;
			} else if (!isValidNumber(chuangFrom.value.width)) {
				chuangFrom.value.width = ''
				showToast('宽度只能输入正整数，且不能以 0 开头');
				return;
			}

			if (!chuangFrom.value.height) {
				showToast('请输入高度');
				return;
			} else if (!isValidNumber(chuangFrom.value.height)) {
				chuangFrom.value.height = ''
				showToast('高度只能输入正整数，且不能以 0 开头');
				return;
			}

			windowArr.value.push({
				long: chuangFrom.value.long,
				width: chuangFrom.value.width,
				height: chuangFrom.value.height
			});
			chuangShow.value = false;
		} else {
			uni.showToast({
				title: '最多只能添加4个窗户',
				icon: 'none'
			});
		}
		// } catch (err) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请完善内容'
		// 	});
		// }
		// }

	};

	// 复制窗户
	const copyChuang = (index) => {
		if (windowArr.value.length < 4) {
			const copiedChuang = {
				...windowArr.value[index]
			};
			windowArr.value.push(copiedChuang);
		} else {
			uni.showToast({
				title: '最多只能复制4个窗户',
				icon: 'none'
			});
		}
	}
	// 删除窗户
	const removeChuang = (index) => {
		windowArr.value.splice(index, 1);
	};


	// 上传所在位置图片
	const afterRead1 = async (event) => {
		uni.setStorageSync('isUpload', '1')
		const MAX_SIZE = 10 * 1024 * 1024; // 10MB = 10 * 1024 * 1024 字节
		// 检查文件大小是否超过 10MB
		if (event.file.size > MAX_SIZE) {
			uni.showToast({
				title: '文件大小不能超过10MB',
				icon: 'none'
			});
			return;
		}

		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);

		let fileListLen = fileList1.value.length;

		// 用来存储上传成功的文件名
		let uploadedFiles = [];

		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const fileName = lists[i].url.match(/[^/]+$/)[0];
			// uForm.value.position = lists[i].url;

			const path = 'khdImage' + "/" + fileName //处理储存位置
			const result = await uploadFilePromise(path, lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
			// uploadedFiles.push(fileName);

		}

	};

	const Imgarr = ref([])

	const uploadFilePromise = async (url, fileUrl) => {
		const resData = await get_oss_url({
			path: url
		});
		const url1 = resData.data.sign_url //上传图片接口
		wx.getFileSystemManager().readFile({
			filePath: fileUrl, // 文件路径
			encoding: 'base64', // 转换为 base64
			success: function(res) {
				const fileBlob = wx.base64ToArrayBuffer(res.data);
				wx.request({
					url: url1, // 仅为示例，非真实的接口地址
					filePath: url,
					method: 'PUT', // 使用 PUT 方法上传文件
					name: 'file',
					header: {
						"Content-Type": " "
					},
					data: fileBlob, // 上传的文件内容
					success: (res) => {
						Imgarr.value.push(resData.data)
						console.log('Imgarr', Imgarr.value)
						uni.$u.toast('上传一个所在位置图片成功');
					},
					fail: function(err) {
						// uni.$u.toast('33333', err);
					},
				})
			},
			fail: function(err) {},
		})

	};


	const showToast = (message, icon = 'none') => {
		uni.showToast({
			icon: icon,
			title: message,
		});
	};


	// 提交方法
	const submit = async () => {
		await nextTick()
		if (!uFormRef.value) return;
		try {
			await uFormRef.value.validate();

			if (doorArr.value.length === 0) {
				showToast('请至少添加一个门洞');
				return;
			}

			if (windowArr.value.length === 0) {
				showToast('请至少添加一个窗户');
				return;
			}

			uForm.value.position = Imgarr.value.map(file => file.full_url).join(',');
			if (Imgarr.value.length === 0) {
				showToast('请至少上传一个位置图片');
				return;
			}
			// 获取门和窗的数据
			const arr1 = toRaw(doorArr.value);
			const arr2 = toRaw(windowArr.value);
			let params = {
				long: uForm.value.long,
				width: uForm.value.width,
				height: uForm.value.height,
				door: JSON.stringify(arr1),
				window: JSON.stringify(arr2),
				position: uForm.value.position
			};
			console.log('paramsparamsparams', params)
			// 提交请求
			const res = await reform(params)
			if (res.code === 1) {
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/common/index'
					})
				}, 50)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}
		} catch (err) {
			showToast('请完善内容');
		}
	}
</script>



<style lang="less" scoped>
	.form {
		padding: 20rpx;
		min-height: 100vh;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));

		::v-deep .u-form-item {
			.u-form-item__body__right__message {
				text-align: right;
				padding-right: 20rpx;
				padding-bottom: 10rpx;
				box-sizing: border-box;
			}

			.u-form-item__body {
				display: flex;
				flex-direction: row !important;
				padding: 0 !important;
				border-top: 1rpx solid #E0E0E0;
				box-sizing: border-box;

				.u-form-item__body__left {
					height: 90rpx;

					.u-form-item__body__left__content__required {
						left: 0 !important;
					}

					.u-form-item__body__left__content__label {
						padding-left: 20rpx;
					}
				}

				.u-form-item__body__right {
					display: flex;
					align-items: center;
					height: 90rpx;

					.unit {
						display: flex;
						align-items: center;
					}

					.u-form-item__body__right__content__slot {
						display: flex;

						.u-input {
							border: none !important;
						}

						.u-input__content__field-wrapper {
							input {
								text-align: right !important;
							}

							input-placeholde {
								color: red ! !important;
							}
						}

						.checkAddress {
							width: 120rpx;
							display: flex;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #CCA05F;
							line-height: 33rpx;
							text-align: left;
							font-style: normal;
						}
					}


				}
			}
		}



		.card {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 0 25rpx 10rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.label {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;


				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					position: relative;
					padding-left: 10rpx;
					box-sizing: border-box;

					&::before {
						content: '*';
						position: absolute;
						left: -10rpx;
						top: 3rpx;
						color: red;
					}
				}

				.add {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #CCA05F;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

			}

			.itemRow {
				display: flex;

				.upload {
					display: flex;
					flex-wrap: wrap;
					padding-top: 30rpx;
					border-top: 1rpx solid #E0E0E0;
					box-sizing: border-box;


					.addData {
						flex: 1;
						max-width: 50%;
						min-width: 50%;
						padding: 0 20rpx;
						box-sizing: border-box;

						.icon {

							image {
								width: 100%;
								height: 230rpx;
							}
						}

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							width: 100%;
							// min-height: 120rpx;
							margin-bottom: 10rpx;
							// width: 100%;
							// display: -webkit-box;
							// -webkit-box-orient: vertical;
							// -webkit-line-clamp: 3;
							// overflow: hidden;


						}

						.edit {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.copy {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #CCA05F;
								line-height: 33rpx;
								text-align: left;
								font-style: normal;
								padding-bottom: 25rpx;
								box-sizing: border-box;
							}

							.remove {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #F34545;
								line-height: 33rpx;
								text-align: left;
								font-style: normal;
								padding-bottom: 25rpx;
								box-sizing: border-box;

							}
						}


					}

				}
			}

			.upload_customRow {
				display: flex;

				::v-deep .u-form-item {
					width: 100%;
				}

				::v-deep .u-form-item__body {
					display: flex;
					flex-wrap: wrap;
					width: 100% !important;

					.u-form-item__body__left {
						width: 100% !important;
					}

					.u-form-item__body__right {
						display: flex;


					}
				}


				.uploadCardImg {
					width: 100%;
					padding-bottom: 20rpx;
					box-sizing: border-box;

					.uploadImg {
						width: 100%;
						position: relative;
						// overflow: hidden;

						display: flex;
						flex-wrap: wrap;

						::v-deep .u-upload {
							display: flex;
							flex-wrap: wrap;
							min-height: 240rpx;

							.u-upload__button {
								width: 49% !important;
								height: 200rpx !important;
								box-sizing: border-box;
								margin: 0 !important;
							}

							.u-upload__deletable {
								right: 12rpx;
								top: 1rpx;
							}

							.u-upload__success {
								right: 12rpx;
								bottom: 22rpx;
							}

							.u-upload__wrap__preview {
								width: 50%;
								height: 220rpx;
								margin: 0 !important;
								padding: 0 10rpx 20rpx 0 !important;
								border-radius: 10rpx;
								box-sizing: border-box;

								image {
									width: 100% !important;
									height: 100% !important;
									border: 1px solid #E0E0E0;
									background-color: aliceblue;
									border-radius: 10rpx;
									box-shadow: rgba(99, 99, 99, 0.2) 0px 5rpx 10rpx 0rpx;
									box-sizing: border-box;
								}
							}
						}
					}

				}

			}


		}

		.btn {
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 30rpx;
			box-sizing: border-box;
			// position: fixed;
			// left: 0;
			// z-index: 2;
			// bottom: constant(safe-area-inset-bottom);
			// bottom: env(safe-area-inset-bottom);
			// bottom: calc(120rpx + env(safe-area-inset-bottom));
			// bottom: calc(120rpx + constant(safe-area-inset-bottom));

			button {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(138deg, #EDA55B 0%, #D09A47 100%);
				border-radius: 14rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				font-style: normal;
			}

		}
	}

	::v-deep .u-safe-bottom {
		padding-bottom: 0 !important;
	}

	.formRow {
		width: 650rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 40rpx 40rpx;
		box-sizing: border-box;



		.label {
			width: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
		}

		::v-deep .u-form {
			width: 100%;
			margin-top: 30rpx;

			.u-form-item {
				display: flex;

				.u-form-item__body__right__message {
					text-align: right;
				}

				.u-form-item__body {
					display: flex;
					flex-direction: row !important;

					.u-form-item__body__left {
						padding-left: 20rpx;
						width: 130rpx !important;
						box-sizing: border-box;
					}

					.u-form-item__body__right {
						display: flex;
						align-items: center;
						height: 90rpx;

						.unit {
							display: flex;
							align-items: center;
						}

						.u-form-item__body__right__content__slot {
							display: flex;

							input {
								width: 100%;
								height: 100%;
								border: none !important;
								padding-right: 10rpx;
								text-align: right !important;
								box-sizing: border-box;
							}

							// .u-input__content__field-wrapper {
							// 	input {
							// 		text-align: right !important;
							// 	}

							// 	input-placeholde {
							// 		color: red ! !important;
							// 	}
							// }
						}
					}
				}
			}

		}

		.footer {
			display: flex;
			width: 100%;
			margin-top: 30rpx;
			justify-content: space-between;

			button {
				width: 270rpx !important;
				height: 88rpx !important;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 88rpx;
				text-align: center;
				font-style: normal;
				border-radius: 14rpx;
			}

			.close {
				color: #333333;
				background: #F0F0F0;
			}

			.save {
				background: linear-gradient(95deg, #ECB86C 0%, #CC9F5F 100%);
				color: #FFFFFF;
			}
		}
	}
</style>